<template>
  <!-- 租赁房产管理 -->
  <base-breadcrumb :title="$route.meta.title">
    <!-- 搜索 -->
    <searchData
      :search-data="searchArr"
      @search="search"
    />
    <!-- 表格 -->
    <a-card :bordered="false">
      <!-- <title-name :title="$route.meta.title" /> -->

      <!-- 表格 -->
     <list-table
        ref="table"
        row-key="id"
        :columns="columns"
        :request="loadData"
        :alert="true"
      >
        <a-button
          slot="prefix" 
          slot-scope="ref"
          v-btn-permission="'oa_018_add_02'"
          class="mb12"
          icon="plus"
          type="primary"
          @click="handleManage(2)"
        >
          新增临建房
        </a-button>
        <template
          slot="action"
          slot-scope="text, record"
        >
          <a
            v-btn-permission="'oa_018_loo_01'"
            @click="handleManage(0, record)"
          >查看</a>
          <a-divider type="vertical" />
          <a
            v-btn-permission="'oa_018_edi_03'"
            @click="handleManage(1, record)"
          >编辑入住人</a>
          <!-- 删除 -->
          <!-- <a-divider type="vertical"></a-divider>
                    <a class="del_btn" @click="handleRemoves([record.id])">删除</a> -->
        </template>
      </list-table>
      <!-- 编辑入住人 -->
      <updatePerson
        ref="updatePerson"
        :address="address"
        :persons="persons"
        :visible.sync="visible"
        @confirm="submitForm"
      />
    </a-card>
  </base-breadcrumb>
</template>

<script>
// import { STable } from '@/components' // 表格
import { getDormitoryList, removeDormitory, updateResidents } from '@/api/office/propertyManagement' // api
import TreeSelectOrganization from '@/components/TreeSelectOrganization'
import SelectCompanyAndProject from '@/components/Select/SelectCompanyAndProject'
import Selector from '@/components/Select/Selector'
import BasePage from '@/views/basePage' // 基础配置
import updatePerson from './updatePerson' // 编辑入住人
import OrgTreeSelect from '@/components/OrgTreeSelect/index'
const searchArr = [
  // 搜索框
  {
    name: '单位',
    valueKey: 'searchQuery',
    type: OrgTreeSelect,
  },
  {
    name: '房屋性质',
    value: 'dataType',
    type: 'select',
    data: [
      {
        value: 'A',
        label: '租房',
      },
      {
        value: 'B',
        label: '自有房',
      },
      {
        value: 'C',
        label: '临建房',
      },
    ],
  },
  {
    name: '入住人',
    type: 'input',
    value: 'residentsUser',
  },
  {
    name: '房屋状态 ',
    value: 'status',
    type: 'select',
    data: [
      {
        value: '0',
        label: '可用',
      },
      {
        value: '1',
        label: '不可用',
      },
    ],
  },
]
const columns = [
  {
    title: '序号',
    width: 80,
    dataIndex: 'index',
    customRender() {
      return arguments[2] + 1
    },
  },
  {
    title: '单位',

    dataIndex: 'deptStr',
  },
  {
    title: '房屋性质',
    ellipsis: true,
    dataIndex: 'dataTypeStr',
  },
  {
    title: '小区名称',
    ellipsis: true,
    dataIndex: 'placeName',
    customRender(text, record, index) {
      return record.placeName || '-'
    },
  },
  {
    title: '房屋地址',
    ellipsis: true,
    dataIndex: 'placeAddress',
    customRender(text, record, index) {
      return record.placeAddress || '-'
    },
  },
  {
    title: '门牌号',
    ellipsis: true,
    dataIndex: 'houseNum',
    customRender(text, record, index) {
      return record.houseNum || '-'
    },
  },

  {
    title: '面积(m²)',
    ellipsis: true,
    dataIndex: 'builtArea',
    customRender(text, record, index) {
      return record.builtArea || '-'
    },
  },
  {
    title: '租金(元/月)',
    dataIndex: 'rentFeeAmount',
    ellipsis: true,
    customRender(text, record, index) {
      return record.rentFeeAmount || '-'
    },
  },
  {
    title: '入住人',
    dataIndex: 'residentsUser',
    ellipsis: true,
    customRender(text, record, index) {
      return record.residentsUser || '-'
    },
  },

  {
    title: '状态',
    dataIndex: 'statusStr',
    ellipsis: true,
    customRender(text, record, index) {
      return record.statusStr || '-'
    },
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '280px',
    align: 'center',
    scopedSlots: { customRender: 'action' },
  },
]
export default {
  name:'a'+Date.now(),
  extends: new BasePage(),
  components: {
    // STable,
    updatePerson,
  },
  data() {
    this.columns = columns
    this.searchArr = searchArr
    return {
      visible: false,
      childInitData: {},
      persons: [],
      queryParam: {}, // 查询参数
      loadData: (parameter) => {
        const requestParameters = Object.assign({}, parameter, { query: this.queryParam })
        return getDormitoryList(requestParameters).then((res) => {
          return res
        })
      }, // 加载数据方法 必须为 Promise 对象
      removeApi: { remove: removeDormitory }, // api
      editModel: 0,
      form: {},
      edtId: '',
      address: '',
      position: '',
    }
  },
  mounted() {
    this.position = this.$currentPost()?.postCode
  },
  methods: {
    //添加入住人
    submitForm(e) {
      let residents = []
      e.forEach((item) => {
        residents.push(item.userId)
      })
      let params = {
        id: this.edtId,
        residents: residents,
      }
      console.log(params)
      this.$refs.table.localLoading = true

      updateResidents(params).then((res) => {
        this.$refs.table.refresh(true)
      })
    },
    // 搜索
    search(value) {
      value && (this.queryParam = value)
      this.$refs.table.refresh(true)
    },

    exportSelect() {},
    // 操作栏
    handleManage(type, record) {
      if (type == 1) {
        let placeName = record.placeName ? ' | ' + record.placeName : ''
        let houseNum = record.houseNum ? ' | ' + record.houseNum : ''
        this.address = record.deptStr + ' | ' + record.dataTypeStr + placeName + houseNum
        this.persons = []
        this.edtId = record.id
        record.residents.forEach((item) => {
          this.persons.push({
            userId: item,
          })
        })
        // this.persons = record
        this.visible = true
        return
      }
      this.editModel = type
      let query = {
        editModel: type,
      }
      let router = ''
      if (record && record.id) {
        query.id = record.id
      }
      if (record?.dataType == 'A') {
        router = '/office/propertyManagement/leaseContract/updateLeaseContract'
      } else if (record?.dataType == 'B') {
        router = '/office/propertyManagement/homeOwnership/updateHomeOwnership'
      } else {
        router = '/office/propertyManagement/dormitory/updateDormitory'
      }

      this.$router.push({
        name: router,
        query,
      })
    },
  },
}
</script>
